<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#canvas{
				background: #272822;
			}
		</style>
	</head>
	<body>
		<canvas id='canvas' width='900' height='500'>
			
		</canvas>
		<script>
			//获得画板
			var canvas=document.getElementById('canvas');
			//获得绘画环境
			var cv=canvas.getContext('2d');
			
			cv.beginPath();
			cv.moveTo(100,20);
			cv.lineTo(100,480);
			
			//指定笔触的颜色和粗细
			cv.strokeStyle='deepskyblue';
			cv.lineWidth=20;
			cv.stroke();
			cv.save();
			
			//开启路径
			cv.beginPath();
			//更改笔触的颜色和粗细
			cv.strokeStyle='yellow';
			cv.lineWidth=10;
			cv.moveTo(100,480);
			cv.lineTo(200,200);
			cv.stroke();
			//保存当前的环境状态
			cv.save();
			
			//开启路径
			cv.beginPath();
			//更改笔触的颜色和粗细
			cv.strokeStyle='green';
			cv.lineWidth=10;
			cv.moveTo(200,200);
			cv.lineTo(250,460);
			cv.stroke();
			
			//开启路径
			cv.beginPath();
			
			//更改笔触的颜色和粗细
//			cv.strokeStyle='yellow';
//			cv.lineWidth=10;
			
			//将环境状态恢复到上次保存的状态
			cv.restore();
			cv.restore();
			cv.moveTo(250,460);
			cv.lineTo(550,160);
			cv.stroke();
			
		</script>
	</body>
</html>
